{% extends "myapp/hat.html" %}
{% load static %}
{% block content %}


<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

{% for el in wbs1 %}

    <script type="text/javascript">
    {#console.log('{{ el }}')#}
    let YOUR_JS_LIST{{ el }} = {{json_list|safe}};
    google.charts.load('current', {'packages':['gantt']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Task ID');
      data.addColumn('string', 'Task Name');
      data.addColumn('string', 'Resource');
      data.addColumn('date', 'Start Date');
      data.addColumn('date', 'End Date');
      data.addColumn('number', 'Duration');
      data.addColumn('number', 'Percent Complete');
      data.addColumn('string', 'Dependencies');


      for(let i = 0; i < YOUR_JS_LIST{{ el }}.length; i++) {

          if ({{ result|safe }}['{{ el }}'].includes(YOUR_JS_LIST{{ el }}[i][0])) {

                    if (YOUR_JS_LIST{{ el }}[i][11])
                      {
                          let messageParts = YOUR_JS_LIST{{ el }}[i][11].split(",");

                          for (let i=0; i <messageParts.length; i++){
                                if (!{{ result|safe }}['{{ el }}'].includes(messageParts[i])){
                                    messageParts.splice(i, 1);
                                }
                          }
                          YOUR_JS_LIST{{ el }}[i][11] = messageParts.join(',');

                          data.addRow([YOUR_JS_LIST{{ el }}[i][0], YOUR_JS_LIST{{ el }}[i][1], YOUR_JS_LIST{{ el }}[i][2],
                              new Date(YOUR_JS_LIST{{ el }}[i][3], YOUR_JS_LIST{{ el }}[i][4] - 1, YOUR_JS_LIST{{ el }}[i][5]),
                              new Date(YOUR_JS_LIST{{ el }}[i][6], YOUR_JS_LIST{{ el }}[i][7] - 1, YOUR_JS_LIST{{ el }}[i][8]),
                              null, 50,
                              YOUR_JS_LIST{{ el }}[i][11]]);

                      }
                    else {
                          data.addRow([YOUR_JS_LIST{{ el }}[i][0], YOUR_JS_LIST{{ el }}[i][1], YOUR_JS_LIST{{ el }}[i][2],
                              new Date(YOUR_JS_LIST{{ el }}[i][3], YOUR_JS_LIST{{ el }}[i][4] - 1, YOUR_JS_LIST{{ el }}[i][5]),
                              new Date(YOUR_JS_LIST{{ el }}[i][6], YOUR_JS_LIST{{ el }}[i][7] - 1, YOUR_JS_LIST{{ el }}[i][8]),
                              null, 50,
                              null]);

                    }
          }
      }


      const options = {
        height: {{total_height}},
        gantt: {
            trackHeight: {{height}},
            shadowEnabled : true,
            criticalPathEnabled : false
        }
      };

      let chart = new google.visualization.Gantt(document.getElementById('chart_div{{ el }}'));

      chart.draw(data, options);
    }
  </script>

    <div id="chart_div{{ el }}"></div>
{% endfor %}





{% endblock %}